import React, { Component } from 'react';
import axios from 'axios';
import Pts from 'prop-types';
class Captcha extends Component {
    // 在子组件对父组件传给当前组件的参数进行类型限制，使用prop-types这个模块
    // 1 引入 2 使用静态属性的形式限制
    static propTypes = {
        // key:value
        getKey: Pts.func.isRequired
    }
    // 设置图片的大小
    static defaultProps={
        w:140,
        h:40
    }
    state = {
        imgUrl: ''//初始数据
    }
    render() {
        return (
            <div onClick={this.loadRefresh} >
                {/* <p>密码</p> */}
                <img src={this.state.imgUrl} alt="" width={this.props.w} height={this.props.h}/>
            </div>
        );
    }
    loadImg = () => {
        axios.get('https://reactapi.iynn.cn/captcha/api/math').then(res => {
            //console.log(res);
            // 将后台验证码返回的key存在父组件的state对象上
            this.setState({
                imgUrl: res.data.img
            }, () => {
                // state值已经回调完毕
                this.props.getKey(res.data.key)
            })
        }).catch(res => { })
    }
    componentDidMount() {
        // 初始化请求验证码
        this.loadImg()
    }
    loadRefresh = () => {
        this.loadImg()
    }
}

export default Captcha;
